<script setup lang="ts">
import { ref } from 'vue';
import type { VideoItem } from '@/types/videoItem'
import { getVideoItemAPI } from '@/services/videoItem'
import { onLoad } from '@dcloudio/uni-app'
import UserComment from "@/componets/UserComment.vue"


const videoItem = ref<VideoItem>()

// 获取页面参数
const query = defineProps<{
    id: string
}>()


// 获取视频详情数据
const getVideoItemData = async () => {

    if (query.id) {
        console.log("query.id", query.id);

        const res = await getVideoItemAPI(query.id)
        videoItem.value = res.result;

    }
}



// 页面加载
onLoad(() => {
    getVideoItemData()
    console.log('页面加载完成');

})


</script>



<template>
    <!-- 视频播放组件 -->
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view>
                <video style="width: 100%;" id="myVideo" :src="videoItem?.videoUrl" controls></video>
            </view>

        </view>
    </view>


    <view class="videoTitle">
        <text style="font-size: 18px; display: block; margin-bottom: 10rpx;">{{ videoItem?.title }}</text>
        <text style="font-size: 16px;color: #666;">{{ videoItem?.publishTime }}</text>


        <!-- 视频作者信息 -->
        <view class="authorContainer">
            <image :src="videoItem?.iconUrl" mode="scaleToFill" />

            <text class="author">{{ videoItem?.author }}</text>
        </view>



        <view class="Like_and_share_Container">
            <button style="width: 40%; font-size: 14px;" @tap="videoItem!.giveLike++" type="primary" plain="true">
                <i class="iconfont icon-dianzan"> {{ videoItem?.giveLike }}</i></button>

            <button style="width: 40%; font-size: 14px;" type="primary" plain="true"> <i style="display: inline-block;"
                    class="iconfont icon-weixin"></i>分享好友</button>

        </view>

    </view>


    <!--   评论 -->
    <view style="margin-top: 30rpx;">
        <UserComment :id="query.id"></UserComment>


    </view>
</template>



<style lang="scss">
page {
    background: #F1F1F1;
}


.videoTitle {
    padding: 20rpx;
    margin-top: 30rpx;
}

.authorContainer {
    margin-top: 30rpx;

    image {
        width: 56rpx;
        height: 56rpx;
        border-radius: 50%;
        border: 2px solid #19d1c3;
        overflow: hidden;
        vertical-align: middle;
    }

    .author {
        align-content: center;
        font-size: 28rpx;
        line-height: 24rpx;
        margin-left: 5rpx;

    }
}


.Like_and_share_Container {
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
    text-align: center;
}
</style>
